<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="font-editor" v-if="value" v-cloak>
        <el-form-item label="字体">
            <ul class="editor-tools">
                <li v-if="showBolderTool" :class="{ active: isBolder }" @click="setBolder">
                    <svg t="1591173757217" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1020" width="200" height="200">
                        <path
                            d="M694.021847 492.679245a208.460775 208.460775 0 0 1 112.873883 74.740815 197.275074 197.275074 0 0 1 37.624627 118.975173 234.899702 234.899702 0 0 1-34.065541 123.551142A203.376365 203.376365 0 0 1 711.817279 892.313803a440.309831 440.309831 0 0 1-168.802383 26.438928h-254.220457a50.844091 50.844091 0 0 1-50.844091-50.844091V168.802383a50.844091 50.844091 0 0 1 50.844091-50.844091h249.644489q145.922542 0 203.376365 63.555114a203.376365 203.376365 0 0 1 59.996028 140.838133 180.496524 180.496524 0 0 1-27.45581 97.112215 206.935452 206.935452 0 0 1-80.333664 73.215491z m-323.368421-39.14995h147.956306A563.860973 563.860973 0 0 0 610.129096 447.428004a122.53426 122.53426 0 0 0 64.063555-31.523337 101.688183 101.688183 0 0 0 27.964251-79.825223A111.34856 111.34856 0 0 0 672.667329 254.220457a121.008937 121.008937 0 0 0-67.114201-33.04866 681.310824 681.310824 0 0 0-101.688183-6.101291H370.653426a25.422046 25.422046 0 0 0-25.422046 25.422046v187.614697a25.422046 25.422046 0 0 0 25.422046 25.422046z m0 370.144985h173.886792a227.781529 227.781529 0 0 0 148.464747-36.607746 127.618669 127.618669 0 0 0 41.692155-101.688182 124.059583 124.059583 0 0 0-44.234359-101.688183 259.304866 259.304866 0 0 0-159.650447-36.099305H370.653426a25.422046 25.422046 0 0 0-25.422046 25.422046v225.239324a25.422046 25.422046 0 0 0 25.422046 25.422046z"
                            fill="#333" p-id="1021" />
                    </svg>
                </li>
                <li v-if="showAlignTool" :class="{ active: isAlignLeft }" @click="setAlign('left')">
                    <svg t="1591173922842" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1158" width="200" height="200">
                        <path
                            d="M153.6 768h716.8a51.2 51.2 0 0 1 0 102.4H153.6a51.2 51.2 0 0 1 0-102.4zM153.6 153.6h716.8a51.2 51.2 0 0 1 0 102.4H153.6a51.2 51.2 0 0 1 0-102.4z m0 307.2h409.6a51.2 51.2 0 0 1 0 102.4H153.6a51.2 51.2 0 0 1 0-102.4z"
                            fill="#666666" p-id="1159" />
                    </svg>
                </li>
                <li v-if="showAlignTool" :class="{ active: isAlignCenter }" @click="setAlign('center')">
                    <svg t="1591173942635" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1296" width="200" height="200">
                        <path
                            d="M870.4 768H153.6a51.2 51.2 0 0 0 0 102.4h716.8a51.2 51.2 0 0 0 0-102.4z m0-614.4H153.6a51.2 51.2 0 0 0 0 102.4h716.8a51.2 51.2 0 0 0 0-102.4z m-153.6 307.2H307.2a51.2 51.2 0 0 0 0 102.4h409.6a51.2 51.2 0 0 0 0-102.4z"
                            fill="#666666" p-id="1297" />
                    </svg>
                </li>
                <li v-if="showAlignTool" :class="{ active: isAlignRight }" @click="setAlign('right')">
                    <svg t="1591173953420" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1434" width="200" height="200">
                        <path
                            d="M870.4 768H153.6a51.2 51.2 0 0 0 0 102.4h716.8a51.2 51.2 0 0 0 0-102.4z m0-614.4H153.6a51.2 51.2 0 0 0 0 102.4h716.8a51.2 51.2 0 0 0 0-102.4z m0 307.2H460.8a51.2 51.2 0 0 0 0 102.4h409.6a51.2 51.2 0 0 0 0-102.4z"
                            fill="#666666" p-id="1435" />
                    </svg>
                </li>
                <li v-if="showItalicTool" :class="{ active: isItalic }" @click="setItalic">
                    <svg t="1591506320811" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2189" width="200" height="200">
                        <path
                            d="M329.649231 72.625231h510.739692L820.066462 177.230769H626.845538l-137.216 709.553231H682.929231l-20.322462 104.605538H151.788308l20.322461-104.605538H364.701538L502.547692 177.230769H309.326769z"
                            fill="#666666" p-id="2190" />
                    </svg>
                </li>
                <li v-if="showColorTool" class="color">
                    <el-color-picker @active-change="fontColorChange" v-model="text.color" color-format="rgb"
                        show-alpha></el-color-picker>
                </li>
            </ul>
        </el-form-item>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        value: { type: Object },
        tools: { type: String, default: "bolder,align,italic,color" },
    },

    mounted: function () { },

    computed: {
        showBolderTool: function () {
            return this.toolItems.includes("bolder");
        },
        showAlignTool: function () {
            return this.toolItems.includes("align");
        },
        showItalicTool: function () {
            return this.toolItems.includes("italic");
        },
        showColorTool: function () {
            return this.toolItems.includes("color");
        },

        toolItems: function () {
            return this.tools.split(",");
        },
        text: {
            get () {
                return this.value;
            },
            set (val) {
                this.$emit("input", val);
            },
        },

        isItalic: function () {
            return this.value.data.fontStyle == "italic";
        },

        isBolder: function () {
            return this.value.data.fontWeight == "bolder";
        },

        isAlignLeft: function () {
            if (!this.value.data.textAlign || this.value.data.textAlign == "left") {
                return true;
            }
            return false;
        },

        isAlignCenter: function () {
            return this.value.data.textAlign == "center";
        },
        isAlignRight: function () {
            return this.value.data.textAlign == "right";
        },
    },

    methods: {
        fontColorChange: function (rgbaValue) {
            this.$set(this.text.data, "color", rgbaValue);
        },

        setItalic: function () {
            var v = "normal";
            if (this.isItalic) {
                v = "normal";
            } else {
                v = "italic";
            }
            this.$set(this.text.data, "fontStyle", v);
        },
        fontColorChange: function (rgbaValue) {
            this.$set(this.text.data, "color", rgbaValue);
        },
        setBolder: function () {
            var w = "";
            if (this.isBolder) {
                w = "normal";
            } else {
                w = "bolder";
            }
            this.$set(this.text.data, "fontWeight", w);
        },
        setAlign: function (val) {
            this.$set(this.text.data, "textAlign", val);
            console.log("set align");
        },
    },
};
</script>

<style scoped>
.editor-tools {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.editor-tools li {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-tools li svg {
    width: 14px;
    height: 14px;
}

.editor-tools li:hover {
    border: 1px solid #eef1fb;
    cursor: pointer;
}

.editor-tools li.active {
    background-color: #eef1fb;
}
</style>